import React from "react";
import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
  ScrollView
} from "react-native";

import Config from "../../config";
import BaseComponent from "./BaseComponent";
import SizeUtils from "../../common/SizeUtils";
import TImage from "../../components/TImage";
import JumpToPageByUrlAction from "../../actions/common/JumpToPageByUrlAction";
import CommonRequestADAction from "../../actions/common/CommonRequestADAction";

export default class NoticeADView extends BaseComponent {
  constructor(props) {
    super(props);

    this.state = {
      txtBottom: 0,
      data: []
    };
    this._timer = 0;
    this.speed = 0;
    this.sleep = 0;
    this._itemHeight = SizeUtils.translateDesignHeightToCode(80);
    this._fps = 10;
    this._sleepTime = parseInt(4000 / this._fps); //5秒
    this._interval = null;
  }

  componentDidMount() {
    this._requestData();
    this._interval = setInterval(() => {
      this._updateInterval(this.state.txtBottom);
    }, this._fps);
  }

  componentWillUnmount() {
    this._interval && clearInterval(this._interval);
  }

  _updateInterval(value) {
    if (this.state.data && this.state.data.length > 2) {
      value += this.speed;
      if (value % this._itemHeight == 0) {
        this.speed = 0;
        this.sleep += 1;
        if (this.sleep == this._sleepTime) {
          //休眠5秒
          this.speed = 1;
          this.sleep = 0;
        }
      }
      if (value >= this.state.data.length * this._itemHeight / 2) {
        value = 0;
        this.speed = 0;
      }
      this.setState({ txtBottom: value });
    }
  }
  //代表公告模块 tag=1 步行 tag=2 文体活动 tag=3 爱情事
  //tag=4 健康运动 tag=5 创新效应 tag=6 精彩在线  tag=7 心灵工坊
  _requestData() {
    new CommonRequestADAction().call(this, { tag: this.props.tag });
  }

  render() {
    return (
      <View
        style={{
          backgroundColor: "#ffffff",
          marginBottom: SizeUtils.translateDesignHeightToCode(0)
        }}
      >
        {this.renderContent()}
      </View>
    );
  }

  renderContent() {
    let width = SizeUtils.getWindowSize().width;
    let left = (120 - 100) / 2;
    if (this.state.data && this.state.data.length > 0) {
      //if(1 == 2){
      return (
        <View
          style={{
            overflow: "hidden",
            width: width,
            height: SizeUtils.translateDesignWidthToCode(120),
            paddingLeft: left
          }}
        >
          <View style={{ margin: left }}>
            <TImage
              source={require("../../../resource/images/home/gunggao.png")}
              style={{ width: 80, height: 80 }}
            />
          </View>

          <ScrollView
            style={{
              position: "absolute",
              width: width - SizeUtils.translateDesignWidthToCode(10),
              height: SizeUtils.translateDesignWidthToCode(80),
              top: SizeUtils.translateDesignWidthToCode((120 - 80) / 2),
              left: 80 + left
            }}
          >
            <View
              style={{
                width: width - SizeUtils.translateDesignWidthToCode(190),
                top: -this.state.txtBottom,
                height: SizeUtils.translateDesignWidthToCode(40)
              }}
            >
              {this.renderTxts()}
            </View>
          </ScrollView>
          <TouchableOpacity
            style={{
              position: "absolute",
              right: 0,
              top: 10,
              width: 44,
              height: 44,
              justifyContent: "center",
              alignItems: "center"
            }}
            onPress={() => {
              this.gotoPage(Config.pages.gonggao_list, {
                tag: this.props.tag
              });
            }}
          >
            <TImage
              source={require("../../../resource/images/home/arrow_gary.png")}
              style={{ width: 30, height: 30 }}
              resizeMode={"contain"}
            />
          </TouchableOpacity>
        </View>
      );
    } else {
      return (
        <View
          style={{
            overflow: "hidden",
            width: width,
            height: SizeUtils.translateDesignWidthToCode(120),
            paddingLeft: left
          }}
        >
          <TImage
            source={require("../../../resource/images/home/gunggao.png")}
            style={{ margin: left, width: 80, height: 80 }}
          />
        </View>
      );
    }
  }

  renderTxtItem(item, index) {
    return (
      <View
        key={index}
        style={{
          width:
            SizeUtils.getWindowSize().width -
            SizeUtils.translateDesignHeightToCode(860),
          height: SizeUtils.translateDesignHeightToCode(40),
          flexDirection: "row",
          justifyContent: "flex-start",
          alignItems: "center"
        }}
      >
        <TouchableOpacity onPress={() => this._pressTxt(item)}>
          <Text
            style={{ width: SizeUtils.translateDesignHeightToCode(505) }}
            numberOfLines={1}
          >
            {item.title}
          </Text>
        </TouchableOpacity>
      </View>
    );
  }

  _pressTxt(data) {
    console.log(data)
    if (data.board_id!==undefined) {
      this.gotoPage(Config.pages.quanzi_post_content, {...data,isGongGao:true});
    }else{
      this.gotoPage(Config.pages.news_content, {...data,isGongGao:true});
    }
  }

  renderTxts() {
    return this.state.data.map((item, index) =>
      this.renderTxtItem(item, index)
    );
  }
}
